<!-- 合同-合同设置-合同档案库-侧边栏 -->
<template>
  <div class="left-list">
    <div @click="collapse" class="collapseBtn">
      <IconCaretRight v-if="isCollapsed" />
      <IconCaretLeft v-else />
    </div>
    <a-layout class="layout-demo">
      <a-layout-sider
        collapsible
        breakpoint="xl"
        hide-trigger
        :collapsed="isCollapsed"
        :collapsed-width="0"
      >
        <div v-show="!isCollapsed">
          <div class="header">
            <span class="title">合同类型</span>
            <a-button
              type="text"
              @click="
                router.push({
                  name: 'ContractTemplate'
                })
              "
              >设置</a-button
            >
          </div>
          <a-scrollbar style="height: 600px; overflow: auto">
            <div class="scroll">
              <div
                class="scroll-item"
                v-for="item in originData"
                :key="item.id"
                @click="itemClick(item.id)"
                :class="currId === item.id ? 'item-active' : ''"
              >
                {{ item.name }}
              </div>
            </div>
          </a-scrollbar>
        </div>
      </a-layout-sider>
    </a-layout>
  </div>
</template>

<script lang="ts" setup>
import { GetContractGroup } from '@/apis/management/contract/baseSetting';
import mitter from '@/utils/mitt';
import { useVModel } from '@vueuse/core';

const router = useRouter();

const props = withDefaults(
  defineProps<{
    id: number;
  }>(),
  {}
);

const emit = defineEmits(['update:id']);
const currId = useVModel(props, 'id', emit); // 储存左侧列表选中的id
// let currId = ref(1); // 储存左侧列表选中的id

// 左侧item点击事件
const itemClick = (id: number) => {
  if (currId.value !== id) {
    currId.value = id;
  }
};

let originData: any = ref([]); // 储存异动类型
let currData = ref(); // 储存当前选中数据
// 获取表格数据

const getData = async () => {
  try {
    let { content } = await GetContractGroup({
      pageNumber: 0,
      pageSize: -1
    });
    if (content) {
      originData.value = content
        .filter((el: any) => el.type === 1)
        .flatMap((obj) => obj.children || []);
      currId.value = originData.value[0].id;
    } else {
      originData.value = [];
      currId.value = 0;
    }
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

let isCollapsed = ref(false); // 判断是否收起
const collapse = (collapsed: boolean) => {
  isCollapsed.value = !isCollapsed.value;
};
</script>

<style scoped lang="less">
.left-list {
  position: relative;
  padding: 0 15px 0 0;

  .collapseBtn {
    position: absolute;
    z-index: 9;
    top: 40%;
    right: 15px;
    height: 70px;
    width: 15px;
    background-color: #eee;
    line-height: 70px;
    text-align: center;
    cursor: pointer;
  }

  .layout-demo {
    height: 100%;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #ccc;
    .title {
      line-height: 60px;
      // position: relative;
      // right: 55px;
    }
    .title::before {
      position: relative;
      top: 5px;
      left: 10px;
      display: inline-block;
      height: 20px;
      width: 5px;
      margin-right: 20px;
      border-radius: 2px;
      // transform: translateY(-50%);
      content: '';
      background-color: #165dff;
    }
  }

  // height: 300px;
  .scroll {
    padding: 10px;

    &-item {
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
      cursor: pointer;
    }
    &-item:hover {
      background-color: #f2f3f5;
      color: #165dff;
    }
  }
  .item-active {
    background-color: #f2f3f5;
    color: #165dff;
  }

  .item-active::before {
    position: absolute;
    display: inline-block;
    height: 50px;
    right: 0px;
    width: 5px;
    margin-right: 10px;
    border-radius: 2px;
    // transform: translateY(-50%);
    content: '';
    background-color: #165dff;
  }
}
</style>
